<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box01{
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="button" value="长大" @click="addAge">
        <p>年龄：{{age}}</p>
        <!-- v-if， v-else-if，v-else -->
        <!-- 
        <p v-if="age<18">未成年</p>
        <p v-else-if="age<=40">青年</p>
        <p v-else-if="age<=60">中年</p>
        <p v-else>老年</p> -->
        <hr/>
        <!-- v-show -->
        <!-- <p v-show="age<18">未成年</p> -->
        <hr/>
        <!-- v-if和v-show：都可以控制dom元素的显示和隐藏 ，不同点：
            1、v-if是通过添加和删除标签来控制dom的显示和隐藏
            2、v-show是通过修改样式的display属性的值来控制DOM元素的显示和隐藏。
        -->
        <p v-if="age<18">未成年(v-if)</p>
        <p v-show="age<18" >未成年(v-show)</p>        
    </div>
</body>

</html>
<script src="./js/vue2.js"></script>
<script>

    let vm = new Vue({
        el: "#app",
        data: {
            age:20
        },
        methods:{
            addAge(){
                this.age++;
            }
        }
    });


</script>